<template>
	<div ref="flowRef" class="flowWrap">
		<startNode></startNode>
		<node
			v-for="(item, index) in inspection"
			:key="item.uuid"
			:nodeIndex="index"
			:name="props.name"
			:id="props.id"
			:treeData="treeData"
			:data="item"
			:showAdd="index == inspection.length - 1"
			@onAdd="handleAdd"
		></node>
		<endNode></endNode>
	</div>
</template>

<script setup name="flow">
import startNode from './components/startNode/index.vue';
import node from './components/node/index.vue';
import endNode from './components/endNode/index.vue';
import { reactive, watch, ref } from 'vue';
const props = defineProps(['treeData', 'id', 'name']);
const flowRef = ref(null);
const uuid = () => {
	return +new Date();
};
const newNodeInfo = () => {
	return { nodeName: '', nodeDeviceId: '', uuid: uuid() };
};
let inspection = reactive([newNodeInfo()]);
watch(inspection, (n, o) => {
	console.log(n);
});
/**监听增加 */
const handleAdd = () => {
	inspection.push(newNodeInfo());
};
defineExpose({
	elem: flowRef
});
</script>

<style lang="less" scoped>
.flowWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
</style>
